<script>
export default {
  name: "EView"
}
</script>

<template>
<h1>循环指令</h1>
  <ul>
    <!-- item从1开始，每一次执行一次，item的值＋1，一直到数字n -->
    <!-- v-for的效果：执行5次，生成5个li，里面是数字1-5.    -->
    <li v-for="item in 5">{{item}}}大傻春</li>
  </ul>
  <ul>
    <li v-for="item in productArr">{{item}}}</li>
  </ul>
  <hr>
  <table border="1px">
    <tr>
      <th>编号</th>
      <th>种类</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in productArr">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>
<script setup>
import {ref} from "vue";
const productArr = ref([
  {title: '苹果', price: 10000, num: 10},
  {title: '香蕉', price: 5000, num: 20},
  {title: '生蚝', price: 500, num: 50},
  {title: '桃子', price: 1000, num: 100},
])
const del = (index) => {
  productArr.value.splice(index, 1)
}



</script>
<style scoped>

</style>